<template>
  <b-col>
    <b-row>
      <NavigationBar :type="0" />
    </b-row>
    <b-row>
      <!-- 头部 -->
      <b-col>
        <!-- 第一行的描述 在头图位置 -->
        <b-row class="line1 shadow"
          :style="fanju!=null?{background:'url(https://images.weserv.nl/?url='+fanju.cover+') center'}:{background:'url(https://s1.imagehub.cc/images/2023/03/27/c6c15085392b10160e0141e725c0ce91.webp) center'}">
          <div class="maoboli" />
          <b-container>
            <b-row class="py-3">
              <!-- 番剧封面 -->
              <b-col class="col-auto">
                <b-img-lazy class="rounded-lg describeImg" height="307.5" width="225"
                  blank-src="https://s1.imagehub.cc/images/2023/03/27/c6c15085392b10160e0141e725c0ce91.webp"
                  :src="fanju == null ?  'https://s1.imagehub.cc/images/2023/03/27/c6c15085392b10160e0141e725c0ce91.webp':'https://images.weserv.nl/?url='+fanju.cover" />
              </b-col>
              <!-- 信息 -->
              <b-col v-if="fanju!=null">
                <!-- 标题 -->
                <b-row>
                  <b-col class="title">
                    <span>{{fanju.title}}</span>
                  </b-col>
                </b-row>
                <!-- 人数相关 -->
                <b-row class="mt-3">
                  <!-- 播放量这一列 -->
                  <b-col class="num col-lg-auto border-right">
                    <b-row>
                      <b-col>
                        总播放量
                      </b-col>
                    </b-row>
                    <b-row class="text-center">
                      <b-col class="pt-3">
                        <span>{{fanju.subtitle}}</span>
                      </b-col>
                    </b-row>
                  </b-col>
                  <!-- 追番人数这一列 -->
                  <b-col class="num col-lg-auto">
                    <b-row>
                      <b-col>
                        追番人数
                      </b-col>
                    </b-row>
                    <b-row class="text-center">
                      <b-col class="pt-3">
                        <span>{{numTrans(fanju.seasons[0].stat.series_follow)}}</span>
                      </b-col>
                    </b-row>
                  </b-col>
                  <!-- 得分一列 -->
                  <b-col class="offset-md-7 text-right" style="color:orange">
                    <b-row>
                      <b-col>
                        <span v-if="fanju.rating !=null" class="iconfont icon-favorite-filling mr-1" style="font-size:30px">{{fanju.rating.score}}</span>
                      </b-col>
                    </b-row>
                    <b-row>
                      <b-col style="font-size:14px">
                        <span v-if="fanju.rating != null">{{fanju.rating.count}}人评</span>
                      </b-col>
                    </b-row>
                    <b-row>
                      <b-col>
                        <span v-if="fanju.rating == null">暂无评分</span>
                      </b-col>
                    </b-row>
                  </b-col>
                </b-row>
                <!-- 开播时间和完结状况 -->
                <b-row class="mt-4">
                  <b-col class="col-md-auto num">
                    <span v-if="fanju.publish.unknow_pub_date == 0">{{fanju.publish.pub_time_show}}开播</span>
                    <span v-if="fanju.publish.unknow_pub_date == 1">开播时间未知</span>
                  </b-col>
                  <b-col class="col-md-auto num">
                    <span>{{fanju.new_ep.desc}}</span>
                  </b-col>
                </b-row>
                <!-- 简介 -->
                <b-row class="mt-3">
                  <b-col class="num">
                    <span class="evaluate">简介: {{fanju.evaluate}}</span>
                  </b-col>
                </b-row>
                <!-- 功能按钮 -->
                <b-row class="mt-2">
                  <b-col class="col-auto">
                    <b-button variant="none" @click="switchStatus(1)" class="describeBtn shadow"
                      :class="{finished: isWatched === true}">{{isWatched ? '已追番':'追  番'}}</b-button>
                  </b-col>
                  <b-col class="col-auto ml-2">
                    <b-button variant="none" @click="switchStatus(2)" class="describeBtn shadow "
                      :class="{finished: isComment === true}">{{isComment ? '已评价':'点  评'}}</b-button>
                  </b-col>
                  <b-col class="col-auto ml-2">
                    <b-button variant="none" :href="fanju.share_url" class="describeBtn shadow">
                      <b-img height="20" width="20" src="https://api.uomg.com/api/get.favicon?url=https://www.bilibili.com" />去B站看番
                    </b-button>
                  </b-col>
                </b-row>
              </b-col>
            </b-row>
          </b-container>
        </b-row>
      </b-col>

      <!-- 分割线 -->
      <div class="w-100" />

      <!-- 评价内容 -->
      <b-col>
        <b-row class="bg-light shadow-sm">
          <b-container>
            <!-- 打头小导航 -->
            <b-row class="text-right" style="font-family:HYZhengYuan-55S">
              <b-col class="py-2 col-md-auto" style="font-size: 22px;">站内评价</b-col>
              <b-col align-self="center">
                <!-- <b-link class="text-decoration-none">按热度</b-link> -->
              </b-col>
              <!-- <b-col class="col-md-auto mr-2" align-self="center">
                <b-link class="text-decoration-none">升序</b-link>
              </b-col> -->
            </b-row>
          </b-container>
        </b-row>

        <!-- 正文 -->
        <b-row v-if="criticism.data.length!=0" class="mt-2">
          <b-container>
            <!-- 此元素体做循环 -->
            <b-row v-for="c in criticism.data" :key="c.id" class="mb-1 px-3" style="font-family:HYZhengYuan-55S">
              <b-col class="rounded border bg-white">
                <!-- 帖子卡片第一行 昵称头像和时间 -->
                <b-row class="py-2">
                  <b-col @click="toUserPage(c.user.id)" class="col-auto pt-2">
                    <b-img-lazy rounded="circle" class="border user" width="50" height="50"
                      blank-src="https://s1.imagehub.cc/images/2023/03/11/64854baae2c410c756c1e1c6aaf4dc32.png" :src="c.user.headUrl" />
                  </b-col>
                  <b-col class="col-md-auto">
                    <b-row @click="toUserPage(c.user.id)" class="pt-2 user">
                      <b-col class="px-0 col-auto">
                        {{c.user.name}}
                      </b-col>
                      <b-col class="px-0 col-auto ml-1">
                        <b-badge style="font-size:11px">Lv{{c.user.level}}</b-badge>
                      </b-col>
                    </b-row>
                    <b-row class="text-muted">
                      {{getTime(c.time)}}
                    </b-row>
                  </b-col>
                  <!-- 点赞  需要参考番剧列表页面的选项-->
                  <b-col class="text-right mr-3" align-self="center">
                    <GoodIcon :type="0" :isLikeInfo="c.isLike" :id="c.id" :num="c.likeNum" />
                  </b-col>
                </b-row>
                <!-- 内容 -->
                <b-row>
                  <b-col>
                    <p class="content overflow-hidden">
                      {{c.content}}
                    </p>
                  </b-col>
                </b-row>
              </b-col>
            </b-row>
          </b-container>
        </b-row>

        <b-row class="mt-3" v-else>
          <b-container>
            <b-col class="text-center" style="font-family:HYZhengYuan-55S;font-size:20px">
              暂无番评
            </b-col>
          </b-container>
        </b-row>

      </b-col>
    </b-row>
    <!-- 一个模拟框 -->
    <b-modal id="criticism" title="发布番评" header-class="border-0" footer-class="border-0" button-size="sm" hide-header-close ok-title="发布" cancel-title="取消"
      :no-close-on-backdrop="true" aria-hidden="true" centered @ok="issueCriticism">
      <!-- 评分表 -->
      <b-row>
        <b-col class="col-3">
          我的评分:{{star}}
        </b-col>
        <b-col class="ml-2">
          <b-form-input v-model="star" step="0.1" type="range" min="0.0" max="10.0" />
        </b-col>
      </b-row>
      <b-row class="mt-4">
        <b-col>
          <b-textarea maxlength="500" autofocus v-model="textContent" class="textArea" no-resize />
        </b-col>
        <div class="w-100" />
        <b-col class="text-right">
          <span v-show="textContent.length==500" class="text-danger mr-2">输入达到上限</span> {{textContent.length}}/500
        </b-col>
      </b-row>
    </b-modal>
  </b-col>
</template>

<script>
import NavigationBar from '../NavigationBar';
import GoodIcon from '../detailPage/comment/GoodIcon';
import tool from '@/utils/tool';
export default {
  components: {
    NavigationBar,
    GoodIcon
  },
  data() {
    return {
      // 是否追番的状态标识 是否点评的状态标识
      isWatched: false,
      isComment: false,
      //番剧数据
      fanju: null,
      //评价内容
      textContent: "",
      //评分
      star: 0,
      //番评列表
      criticism: {
        data: [],
      },
      uid: null,
    }
  },
  methods: {
    // 追番按钮
    switchStatus(id) {
      switch (id) {
        case 1:
          this.toFollow(this.fanju.media_id, "bangumi");
          break;
        case 2:
          this.$bvModal.show('criticism')
      }
    },
    //转换获取的数字为xxx万
    numTrans(num) {
      if (num > 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num
    },
    //查询是否追番
    isFollow(id) {
      this.$httpUser.isFollow(id).then((res) => {
        console.log("是否", res);
        if (res == "1") {
          this.isWatched = true;
        } else {
          this.isWatched = false;
        }
      })
    },
    //进行追番操作
    toFollow(id, type) {
      this.$httpUser.toFollow(id, type).then((res) => {
        console.log("去", res);
        if (res == "1") {
          this.isFollow(id);
        }
      })
    },
    //发布番评
    issueCriticism() {
      var criticism = JSON.stringify({
        content: this.textContent,
        bangumiId: this.fanju.media_id,
        score: this.star,
      })
      this.$httpIssue.criticismIssue(criticism);
    },
    //获取番评
    updatePage(page, id, order) {
      this.$httpIssue.getCriticismList(page, id, order).then((res) => {
        console.log(res);
        this.criticism = res;
      })
    },
    //获取时间
    getTime(time) {
      return tool.transTime(time);
    },
  },
  created() {
    //查询数据
    this.$httpBangumi.getBangumiInfo(this.$route.query.id, this.$route.query.type).then((res) => {
      this.fanju = res;
      document.title = "番剧详情-" + res.title;
      this.isFollow(res.media_id)
      this.updatePage(this.$route.query.page, res.media_id, 1);
      console.log(res);
    });
    //查询登录用户
    this.$httpUser.isUserLogin().then((res) => {
      this.uid = res
      // console.log(res, this.user.id);
    }).catch((err) => {
      console.log(err);
    });
  }
}

</script>

<style scoped>
.line1 {
  background-size: 100%;
}
.maoboli {
  backdrop-filter: blur(25px);
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #00000073;
}
.describeImg {
  border: solid 5px white;
}
.describeBtn {
  background-color: #f36392;
  font-family: HYZhengYuan-55S;
  font-size: 20px;
  min-width: 100px;
  max-width: 140px;
  border-radius: 8px;
}
.describeBtn:hover {
  background-color: #ff85ad;
}
.title {
  font-size: 23px;
  font-family: HYZhengYuan-85S;
  color: white;
}
.num {
  font-family: HYZhengYuan-55S;
  color: white;
}
.finished {
  background-color: #a9a9a9dc;
  font-family: HYZhengYuan-55S;
  font-size: 20px;
}
.content {
  font-size: 18px;
  color: black;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3; /* 要显示的行数 */
  -webkit-box-orient: vertical;
}
.evaluate {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3; /* 要显示的行数 */
  -webkit-box-orient: vertical;
}
.btn:focus,
.textArea:focus {
  outline: none;
  box-shadow: none;
}
</style>